<template>
  <div class="supervision-dialog">
    <el-dialog
      :visible="visible"
      width="600px"
      title="督办"
      custom-class="supervision-popup"
      @close="resetFun"
    >
      <el-form ref="form" :rules="rules" :model="form">
        <el-form-item prop="supervision" label="督办意见">
          <el-input
            class="textarea"
            :maxlength="200"
            type="textarea"
            resize="none"
            placeholder="请输入"
            v-model="form.supervision" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" >
        <el-button @click="submitFun" type="primary" style="margin-right: 12px">确定</el-button>
        <el-button @click="resetFun">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { urgeToHandleAlarmOrder } from '@/api/modules/eventManagement/eventDialog/supervision-dialog.js'
export default {
  name: "SupervisionDialog",
  props:{
    visible: {
      type: Boolean,
      default: false
    },
    orderData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      rules: {
        supervision: { required: true, message: '请填写督办意见。' },
      },
      form: {
        supervision: ''
      }
    }
  },
  methods: {
    submitFun() {
      this.$refs.form.validate(valid => {
        if(valid) {
          const params = {
            orderId: this.orderData.warningOrderId,  //工单号
            remark: this.form.supervision,  //督办意见
          }
          urgeToHandleAlarmOrder(params).then(res => {
            if(res.code === 200) {
              $message.success('督办成功。')
              this.resetFun()
              this.$set(this.orderData, 'isHandleDisplay', '1')
              this.$emit('supervisionSuccess')
            } else {
              $message.error('督办失败。')
              this.resetFun()
            }
          }).catch(e => {
            $message.error('督办失败。')
            this.resetFun()
          })

        }
      })
    },
    resetFun() {
      this.$emit('update:visible', false)
      this.$refs.form.resetFields()
    }
  }
}
</script>

<style scoped lang="scss">
@import "@/assets/styles/common/customBaseUi.scss";
::v-deep .el-form {
  .el-form-item {
    display: flex;
    margin-bottom: 0;
  }
  .el-form-item__label {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
  }
  .el-form-item__content {
    flex: 1;
    margin-bottom: 0;
    .el-form-item__error {
      position: unset;
    }
  }
}

::v-deep .textarea textarea{
  height: 120px;
}
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  .el-button + .el-button {
    margin: 0;
  }
}
</style>
<style lang="scss">
.supervision-popup {
  .el-dialog__header,el-dialog__body {
    padding: 12px;
    .el-dialog__headerbtn {
      right: 12px;
      top: 12px;
    }
  }
}
</style>
